iT邦幫忙

2026 iThome 鐵人賽

DAY 8
0
Build on Google AI

AI 避雷探針|Google Maps 店家評論智慧分析助手系列 第 8

Day 8|設計網站功能:規劃使用流程

  • 分享至 

  • xImage
  •  

前幾天已經陸續認識了製作此網站可能會需要的工具。
在開始真正製作網站之前,我覺得還需要先想清楚一件事:

使用者到底要怎麼使用「AI 避雷探針」?

如果沒有先規劃好網站的功能和操作流程,之後開始寫程式時,很容易做到一半才發現功能還沒想清楚。
所以今天先把整個網站的基本流程規劃出來。

AI 避雷探針的使用流程

目前預計的操作流程是:
首頁(之後再考慮做登入)

輸入店家

確認店家(可能會有同名或是分店)

開始分析

分析中

避雷報告

接下來就把每一個步驟拆開來看。

1. 首頁

使用者進入網站後,首先看到的是「AI 避雷探針」。
首頁會簡單介紹這個網站可以做什麼,讓使用者知道:
輸入一家店,就可以透過 AI 分析店家評論,快速整理出可能需要注意的地方。
首頁也會放置店家輸入欄位,讓使用者可以直接開始查詢。

2. 輸入店家

使用者輸入想查詢的店家名稱。
例如:
某某拉麵店
希望可以搭配 Google Maps / Places API,找到使用者輸入的店家,並取得相關的店家資料。
目前先把這個功能當成之後要完成的目標。

3. 確認店家與開始分析

避免搜尋結果中有多間名稱相似的店家或是分店的狀況,可以先讓使用者確認要分析的是哪一家。
確認店家後,再按下「開始分析」。
網站接著會開始取得需要的資料,再交給 Gemini 進行分析。
預計流程會是:
使用者輸入店家

Google Maps / Places API

取得店家相關資料與評論

Gemini 分析評論

4. 分析中

因為 AI 分析需要一些時間,所以不希望使用者按下按鈕後,畫面完全沒有變化。
因此想設計一個「分析中」的狀態。
例如顯示:
正在分析評論中,請稍候……
讓使用者知道網站目前正在處理資料,而不是沒有反應。

5. 避雷報告

分析完成後,最後會顯示「避雷報告」。
目前預計會整理成幾個主要項目,例如:

  • 整體評價
  • 可能的雷點
  • 餐點/服務
  • 環境
  • 價格
  • 疑似罐頭評論/異常評論
  • 評論參考度
    希望使用者不用自己把大量評論全部看完,而是可以先透過這份報告快速了解這家店的特色和可能需要注意的地方。

目前的網站架構

把今天的規劃整理起來,目前可以想成:
首頁

輸入店家

Google Maps / Places API

取得店家評論

Gemini 分析

整理成 JSON

顯示避雷報告
這樣前幾天認識的技術也開始慢慢串在一起。

今天的學習

今天沒有急著開始寫程式,而是先把「AI 避雷探針」的使用流程大概規劃出來。
我發現做網站不只是把功能寫出來而已,在開始開發之前,也需要先思考:
使用者會怎麼操作?
網站需要哪些功能?
資料會經過哪些步驟?
先把這些流程想清楚,之後開始實作時應該會比較有方向,不會漏東漏西。


上一篇
Day 7|認識 Firebase:讓網站有後端服務
系列文
AI 避雷探針|Google Maps 店家評論智慧分析助手8
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言